import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView } from 'react-native';
import { Simplecode ,Button} from 'iftide';

export default class Basic extends Component { 

    constructor(props) {
        super(props);
        this.state = {
            disable: true,
        };
    }

    onChangeText(text) {
        if(text.length == 6){
            this.setState({disable:false});
        }
    }

    onEnd(text){
        console.log(text);
    }

    onFocus(){
        console.log("focus...");
    }

    onPress1(){
        this.simplecode1.clear();
    }

    render() { 

        return (
            <View style={{flex:1}}>
                <Text style={styles.title}>六位数字密码框</Text>
                <Text style={styles.desc}>说明：</Text>
                <Text style={styles.desc}>用于输入密码时使用，输入完成后可通过自定义回调函数获取输入的值并进行相应的操作</Text>
                <Simplecode
                    ref={(obj)=> this.simplecode1 = obj}
                    containerStyles={{marginLeft:50,marginTop:50}}   
                    onChangeText={(text)=> this.onChangeText(text)}
                    autoFocus={true}
                    onFocus={this.onFocus}
                    onEnd={this.onEnd}    
                />
                <Simplecode
                    containerStyles={{marginLeft:50,marginTop:50}}
                    onEnd={this.onEnd}
                    disable={this.state.disable}
                />
                <View style={{marginTop:20,marginLeft:50}}>
                    <Button title={"点击清空"} size={"middle"} type={"secondary"} onPress={()=>this.onPress1()}/>
                </View>
            </View>
        );
    }

}

const styles = StyleSheet.create({

    title:{
        textAlign:'center',
        fontSize: 20,
        margin: 10,
        color: '#333'
    },
    desc:{
        marginLeft:20,
        marginTop: 10,
        fontSize:16,
        color:'#666',
    }
});
